<script setup lang='ts'>

import { appContext } from '@/models/app.context';
import { NotifyType, appNotify } from '@/models/app.notify';
import { UserInfo } from '@/models/user';
import { hope } from '@/tools/hope/@types/hope';
import { onMounted, onUnmounted, ref, h } from 'vue';
import { formatTime, getUuid } from '@/utils/common.methods';
import { userService } from '@/services/user.service';
import router from '@/router';
import { appRef } from '@/models/app.ref';
import { Modal, Button, Checkbox } from '@arco-design/web-vue';
import { chatDB } from '@/db/chat';

defineProps<{ collapsed?: boolean, theme?: string }>()

const user = ref({} as UserInfo);
const isShowUserInfo = ref(false);


const id = getUuid();
onMounted(() => {
  appNotify.addListener(NotifyType.UserInfo, updateUserInfo, 'user-info' + id);
  updateUserInfo();
})

onUnmounted(() => {
  appNotify.removeListener(NotifyType.UserInfo, 'user-info' + id);
})

function updateUserInfo(): void {
  user.value = appRef.user.data;
}

function openLogin(): void {
  hope.login();
}



function onLogOut(): void {
  let isClear = false;
  Modal.info({
    title: '确认退出吗？',
    content: () => h('div', { class: 'flex-c' }, [
      h('p', '退出登录后将无法多端同步数据'),
      h(Checkbox, { onChange: (e: boolean) => isClear = e }, '同时清除所有缓存数据'),
    ]),
    onOk: async () => {
      if (isClear) {
        await chatDB.clear();
      }
      appContext.setGlobal({ token: '' });
      localStorage.removeItem("token");
      location.reload();
    }
  });
  // DialogPlugin.confirm({
  //   header: '提示',
  //   body: '确认退出吗？',
  //   confirmBtn: '确认',
  //   cancelBtn: '取消',
  //   onConfirm: () => {
  //     appContext.setGlobal({ token: '' });
  //     location.reload();
  //   },
  // })
}

function onLogOff(): void {
  // DialogPlugin.confirm({
  //   header: '提示',
  //   body: '确认注销吗？',
  //   confirmBtn: '确认',
  //   cancelBtn: '取消',
  //   onConfirm: () => {
  //     userService.logoff().then(() => {
  //       appContext.setGlobal({ token: '' });
  //       location.reload();
  //     })
  //   },
  // })
}

function onRecharge(): void {
  isShowUserInfo.value = false;
  router.replace('/commodity');
  // window.open(Site.shopping_mall_url)
}


function onRestOpenid(): void {
  const { nick, avatar, birthday, sex } = user.value;
  userService.update(nick, avatar, sex, birthday, '')
}


</script>
<template>
  <div class="flex" v-if="theme === 'index'">

    <div class="flex" v-if="user.uid">
      <img src="@/assets/icons/home/user.svg">
      <span class="user" @click="onLogOut">退出登录 </span>
    </div>
    <div class="flex" v-else>
      <img src="@/assets/icons/home/user.svg">
      <span class="user" @click="openLogin">点击登录 </span>
    </div>

  </div>
  <div class="user-header flex" v-else>
    <div class=" box" v-if="user.uid">
      <div class="info flex" @click="onLogOut">
        <a-avatar>
          <img class="avatar" v-if="user.avatar" :src="user.avatar" alt="">
          <span v-else>{{ user.nick[0] }}</span>
        </a-avatar>
        <span class="nick ellipsis" v-if="collapsed">退出登录</span>
      </div>
      <div class="setting">
      </div>
    </div>
    <div class="login box flex" @click="openLogin" v-else>
      <icon-user size="24" />
      <span v-if="collapsed" style="margin-left: 6px;">点击登录</span>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.user-header {
  width: 100%;
  font-size: 16px;
  justify-content: center;

  .box {
    width: 100%;
    justify-content: center;
    cursor: pointer;
    // border: var(--color-neutral-10) solid 1px;
    background: var(--color-neutral-2);
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
  }

  .info {
    justify-content: center;

    .nick {
      margin-left: 10px;
    }
  }


  .login {}

}

@media (max-width: 780px) {

  .user {
    .nick {
      display: none;
    }
  }
}
</style>